<template>
    <div id="home">
        <NavBar>
            <template v-slot:default>图书兄弟</template>
        </NavBar>
    
        <TabControl v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销', '新书', '精选']"></TabControl>
        
        <div class="wrapper">
            <div class="content">
                <div ref="banref">
                    <div class="banner">
                        <HomeSwiper :banners="banners"></HomeSwiper>
                    </div>
    
                    <Recommend :recommends="recommends"></Recommend>
                </div>
    
                <TabControl @tabClick="tabClick" :titles="['畅销', '新书', '精选']"></TabControl>
    
                <GoodsList :goods="showGoods"></GoodsList>
            </div>
        </div>
    
        <BackTop v-show="isShopBackTop" @bTop="bTop"></BackTop>
    </div>
</template>

<script>
// 导入的名字和原来组件的名字好像美关系
import NavBar from "components/common/navbar/NavBar";

import Recommend from "./ChildComps/Recommend";

import TabControl from "components/content/tabControl/TabControl";

import GoodsList from "components/content/goods/GoodsList";

import BackTop from "components/common/BackTop/BackTop";

import HomeSwiper from "./ChildComps/HomeSwiper";

import {getHomeAllData, getHomeGoods} from "network/home";

import {onMounted, ref, reactive, computed, watchEffect, nextTick} from 'vue';

import BScroll from 'better-scroll'

export default {
    name: "Home",
    components: {
        // 注册名字要和导入名字一样
        NavBar,
        Recommend,
        TabControl,
        GoodsList,
        BackTop,
        HomeSwiper
    },
    
    setup() {
        
        let isTabFixed = ref(false);
        let isShopBackTop = ref(false);
        
        let banref = ref(null);
        
        const recommends = ref([]);
        
        let banners = ref([]);
        
        // 商品列表数据模型
        const goods = reactive({
            sales: {page:1, list: []},
            new: {page:1, list: []},
            recommend: {page:1, list: []},
        })
        
        let currentType = ref('sales');
        
        const showGoods = computed(()=> {
            return goods[currentType.value].list;
        })
    
        let bscroll = reactive({});
        
        onMounted(()=> {
            getHomeAllData().then(res=> {
                // console.log(res.goods.data);
                recommends.value = res.goods.data;
                banners.value = res.slides;
            })
            
            getHomeGoods('sales').then(res=> {
                goods.sales.list = res.goods.data
            })
            getHomeGoods('recommend').then(res=> {
                goods.recommend.list = res.goods.data
            })
            getHomeGoods('new').then(res=> {
                goods.new.list = res.goods.data
            })
            
            // 创建Better Scrill对象
            bscroll = new BScroll(document.querySelector('.wrapper'), {
                probeType: 2, // 0，1，2，3    3只要在运动就触发滚动事件
                click: true, // 允许点击，默认是关闭的
                pullUpLoad: true, // 开启上拉加载更多，默认是关闭
            });
            
            // 触发滚动事件
            bscroll.on('scroll', (position)=> {
                isShopBackTop.value = isTabFixed.value = (-position.y) > banref.value.offsetHeight;
            })
            
            
            
            // 上拉加载数据，触发pullingup
            bscroll.on("pullingUp", ()=> {
                
                const page = goods[currentType.value].page + 1;
                getHomeGoods(currentType.value, page).then(res => {
                    goods[currentType.value].list.push(...res.goods.data);
                    goods[currentType.value].page += 1;
                })
                
                // 完成上拉，等数据请求完成，重新计算高度
                bscroll.finishPullUp();
                
                bscroll.refresh();
            })
        })
        
        const tabClick = (index) => {
            
            let types = ['sales', 'new', 'recommend']
            
            currentType.value = types[index];
            
            nextTick(()=> {
                // 重新计算高度
                bscroll && bscroll.refresh();
            })
        }
    
        // 监听 任何一个变量有变量
        watchEffect(()=> {
            nextTick(()=> {
                // 重新计算高度
                bscroll && bscroll.refresh();
            })
        })
        
        const bTop = () => {
            bscroll.scrollTo(0, 0, 500);
        }
        
        return {
            recommends,
            tabClick,
            goods,
            showGoods,
            isTabFixed,
            banref,
            isShopBackTop,
            bTop,
            banners
        }
        
    }
}
</script>

<style scoped>

.banner img {
    width: 100%;
}

#home {
    position: relative;
    height: 100vh;
}

.wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
}

</style>